<template>
	<div class="container">
		<button type="primary" class="btn-upload" @click="uploadImage()">上传照片</button>
		<div class="photo-list">
			<div v-for="(photo, index) in photos" :key="index" class="photo-item">
				<img :src="photo.url" alt="photo" class="photo">
				<button type="warn" class="btn-delete" @click="deletePhoto(photo)">删除</button>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '../../common/config';
	export default {
		data() {
			return {
				photos: [],
			};
		},
		methods: {
			onLoad() {
				const that = this
				uni.request({
					url: config.baseUrl + 'person/getActivity',
					method: 'POST',
					data: {

					},
					success: (res) => {
						// console.log(res);
						that.photos = res.data;
						for (let i = 0; i < res.data.length; i++) {
							that.photos[i].url = config.baseUrl + that.photos[i].url;
						}
						console.log(that.photos);
					}
				})
			},
			uploadImage(event) {
				const that = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const imgName = chooseImageRes.tempFiles[0].name;
						// console.log(type);
						uni.uploadFile({
							url: config.baseUrl + 'person/updateActivityImage',
							filePath: tempFilePaths[0],
							formData: {
								'imgName': imgName
							},
							success: (res) => {
								console.log(res);
								if (res.statusCode == 200 && res.data == "写入成功") {
									uni.navigateTo({
										url: '/pages/Person/Manage'
									})
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									})
								} else if (res.data == "已存在" && res.statusCode == 200) {
									uni.showToast({
										title: '图片已存在',
										icon: 'error'
									})
								} else {
									uni.showToast({
										title: '出错',
										icon: 'error'
									})
								}
							}
						});
					}
				});
			},
			deletePhoto(photo) {
				let url = photo.url;
				let i = url.indexOf("image/") + "image/".length;
				let imgName = url.substring(i);
				console.log(imgName);
				uni.request({
					url: config.baseUrl + 'person/removeActivity',
					method: 'POST',
					data: {
						'imgName': imgName
					},
					success: (res) => {
						console.log(res);
						if (res.data == '删除成功') {
							uni.navigateTo({
								url: '/pages/Person/Manage'
							});
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		height: 90vh;
		background: linear-gradient(to bottom, #FFDAB9, #FFF8DC);
		/* 从上往下变淡的橘色渐变 */
		background: linear-gradient(to right, #FFDAB9, #FFF8DC);
		/* 从左往右变淡的橘色渐变 */
	}

	.btn-delete {
		width: 130rpx;
	}

	.btn-upload {
		width: 600rpx;
	}

	.photo-list {
		display: flex;
		flex-wrap: wrap;
	}

	.photo-item {
		margin: 10px;
	}

	.photo {
		width: 140px;
		height: 180px;
		object-fit: cover;
		border-radius: 30rpx;
		margin-left: 15rpx;
	}

	button {
		margin-top: 10px;
	}
</style>